<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Progress-demo-primary">进度条</a></li>
                <li><a href="#src-components-Progress-demo-secondary">不同颜色</a></li>
                <li><a href="#src-components-Progresss-demo-tertiary">垂直进度条</a></li>
                <li><a href="#src-components-Progress-demo-style">垂直进度条不同颜色</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>Progress进度条</h1>
        <section class="markdown">
            <p></p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-12 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Progress-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
    <div class="box box-solid">
      <div class="box-header with-border">
        <h3 class="box-title">Progress Bars Different Sizes</h3>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <p><code>.progress</code></p>

        <div class="progress">
          <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
            <span class="sr-only">40% Complete (success)</span>
          </div>
        </div>
        <p>Class: <code>.sm</code></p>

        <div class="progress progress-sm active">
          <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
            <span class="sr-only">20% Complete</span>
          </div>
        </div>
        <p>Class: <code>.xs</code></p>

        <div class="progress progress-xs">
          <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
            <span class="sr-only">60% Complete (warning)</span>
          </div>
        </div>
        <p>Class: <code>.xxs</code></p>

        <div class="progress progress-xxs">
          <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
            <span class="sr-only">60% Complete (warning)</span>
          </div>
        </div>
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Progress-demo-primary">不同尺寸</a></div>
                    <div>
                         <p></p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;div class=&quot;box box-solid&quot;&gt;
      &lt;div class=&quot;box-header with-border&quot;&gt;
        &lt;h3 class=&quot;box-title&quot;&gt;Progress Bars Different Sizes&lt;/h3&gt;
      &lt;/div&gt;
      &lt;!-- /.box-header --&gt;
      &lt;div class=&quot;box-body&quot;&gt;
        &lt;p&gt;&lt;code&gt;.progress&lt;/code&gt;&lt;/p&gt;

        &lt;div class=&quot;progress&quot;&gt;
          &lt;div class=&quot;progress-bar progress-bar-primary progress-bar-striped&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;40&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 40%&quot;&gt;
            &lt;span class=&quot;sr-only&quot;&gt;40% Complete (success)&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;p&gt;Class: &lt;code&gt;.sm&lt;/code&gt;&lt;/p&gt;

        &lt;div class=&quot;progress progress-sm active&quot;&gt;
          &lt;div class=&quot;progress-bar progress-bar-success progress-bar-striped&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;20&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 20%&quot;&gt;
            &lt;span class=&quot;sr-only&quot;&gt;20% Complete&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;p&gt;Class: &lt;code&gt;.xs&lt;/code&gt;&lt;/p&gt;

        &lt;div class=&quot;progress progress-xs&quot;&gt;
          &lt;div class=&quot;progress-bar progress-bar-warning progress-bar-striped&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 60%&quot;&gt;
            &lt;span class=&quot;sr-only&quot;&gt;60% Complete (warning)&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;p&gt;Class: &lt;code&gt;.xxs&lt;/code&gt;&lt;/p&gt;

        &lt;div class=&quot;progress progress-xxs&quot;&gt;
          &lt;div class=&quot;progress-bar progress-bar-danger progress-bar-striped&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 60%&quot;&gt;
            &lt;span class=&quot;sr-only&quot;&gt;60% Complete (warning)&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.box-body --&gt;
    &lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>
            <section class="code-box" id="src-components-Progresss-demo-tertiary">
                <section id="J_vue_iw3mdfv42u" class="code-box-demo">
                    <div>
<div class="box box-solid">
            <div class="box-header with-border">
              <h3 class="box-title">Progress bars</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <div class="progress">
                <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
              <div class="progress">
                <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                  <span class="sr-only">20% Complete</span>
                </div>
              </div>
              <div class="progress">
                <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                  <span class="sr-only">60% Complete (warning)</span>
                </div>
              </div>
              <div class="progress">
                <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                  <span class="sr-only">80% Complete</span>
                </div>
              </div>
            </div>
            <!-- /.box-body -->
          </div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Progresss-demo-tertiary">块级按钮</a></div>
                    <div>
                        <p>
                        </p>
                    </div><span class="collapse anticon anticon-circle-o-right" unselectable="none"></span></section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code>&lt;div class=&quot;box box-solid&quot;&gt;
            &lt;div class=&quot;box-header with-border&quot;&gt;
              &lt;h3 class=&quot;box-title&quot;&gt;Progress bars&lt;/h3&gt;
            &lt;/div&gt;
            &lt;!-- /.box-header --&gt;
            &lt;div class=&quot;box-body&quot;&gt;
              &lt;div class=&quot;progress&quot;&gt;
                &lt;div class=&quot;progress-bar progress-bar-green&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;40&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 40%&quot;&gt;
                  &lt;span class=&quot;sr-only&quot;&gt;40% Complete (success)&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;progress&quot;&gt;
                &lt;div class=&quot;progress-bar progress-bar-aqua&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;20&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 20%&quot;&gt;
                  &lt;span class=&quot;sr-only&quot;&gt;20% Complete&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;progress&quot;&gt;
                &lt;div class=&quot;progress-bar progress-bar-yellow&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 60%&quot;&gt;
                  &lt;span class=&quot;sr-only&quot;&gt;60% Complete (warning)&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;progress&quot;&gt;
                &lt;div class=&quot;progress-bar progress-bar-red&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;80&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 80%&quot;&gt;
                  &lt;span class=&quot;sr-only&quot;&gt;80% Complete&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- /.box-body --&gt;
          &lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>
        </div>
        <div class="ant-col-12 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box" id="src-components-Progress-demo-secondary">
                <section id="J_vue_z0xtotnq5o" class="code-box-demo">
                    <div>
<div class="box box-solid">
            <div class="box-header with-border">
              <h3 class="box-title">Vertical Progress Bars Different Sizes</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body text-center">
              <p>By adding the class <code>.vertical</code> and <code>.progress-sm</code>, <code>.progress-xs</code> or
                <code>.progress-xxs</code> we achieve:</p>

              <div class="progress vertical active">
                <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                  <span class="sr-only">40%</span>
                </div>
              </div>
              <div class="progress vertical progress-sm">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 100%">
                  <span class="sr-only">100%</span>
                </div>
              </div>
              <div class="progress vertical progress-xs">
                <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
                  <span class="sr-only">60%</span>
                </div>
              </div>
              <div class="progress vertical progress-xxs">
                <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
                  <span class="sr-only">60%</span>
                </div>
              </div>
            </div>
            <!-- /.box-body -->
          </div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title">
                        <a href="#src-components-Progress-demo-secondary">按钮尺寸</a>
                    </div>
                    <div>
                        <p></p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" unselectable="none"></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code>&lt;div class=&quot;box box-solid&quot;&gt;
            &lt;div class=&quot;box-header with-border&quot;&gt;
              &lt;h3 class=&quot;box-title&quot;&gt;Vertical Progress Bars Different Sizes&lt;/h3&gt;
            &lt;/div&gt;
            &lt;!-- /.box-header --&gt;
            &lt;div class=&quot;box-body text-center&quot;&gt;
              &lt;p&gt;By adding the class &lt;code&gt;.vertical&lt;/code&gt; and &lt;code&gt;.progress-sm&lt;/code&gt;, &lt;code&gt;.progress-xs&lt;/code&gt; or
                &lt;code&gt;.progress-xxs&lt;/code&gt; we achieve:&lt;/p&gt;

              &lt;div class=&quot;progress vertical active&quot;&gt;
                &lt;div class=&quot;progress-bar progress-bar-primary progress-bar-striped&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;40&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;height: 40%&quot;&gt;
                  &lt;span class=&quot;sr-only&quot;&gt;40%&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;progress vertical progress-sm&quot;&gt;
                &lt;div class=&quot;progress-bar progress-bar-success&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;20&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;height: 100%&quot;&gt;
                  &lt;span class=&quot;sr-only&quot;&gt;100%&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;progress vertical progress-xs&quot;&gt;
                &lt;div class=&quot;progress-bar progress-bar-warning progress-bar-striped&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;height: 60%&quot;&gt;
                  &lt;span class=&quot;sr-only&quot;&gt;60%&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;progress vertical progress-xxs&quot;&gt;
                &lt;div class=&quot;progress-bar progress-bar-info progress-bar-striped&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;height: 60%&quot;&gt;
                  &lt;span class=&quot;sr-only&quot;&gt;60%&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- /.box-body --&gt;
          &lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>
            <section class="code-box" id="#src-components-Progress-demo-style">
                <section id="J_vue_z0xtotnq5o" class="code-box-demo">
                    <div>
<div class="box box-solid">
            <div class="box-header with-border">
              <h3 class="box-title">Vertical Progress bars</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body text-center">
              <p>By adding the class <code>.vertical</code> we achieve:</p>

              <div class="progress vertical">
                <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                  <span class="sr-only">40%</span>
                </div>
              </div>
              <div class="progress vertical">
                <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 20%">
                  <span class="sr-only">20%</span>
                </div>
              </div>
              <div class="progress vertical">
                <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%">
                  <span class="sr-only">60%</span>
                </div>
              </div>
              <div class="progress vertical">
                <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="height: 80%">
                  <span class="sr-only">80%</span>
                </div>
              </div>
            </div>
            <!-- /.box-body -->
          </div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title">
                        <a href="##src-components-Progress-demo-style">按钮尺寸</a>
                    </div>
                    <div>
                        <p></p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" unselectable="none"></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code>&lt;div class=&quot;box box-solid&quot;&gt;
            &lt;div class=&quot;box-header with-border&quot;&gt;
              &lt;h3 class=&quot;box-title&quot;&gt;Vertical Progress bars&lt;/h3&gt;
            &lt;/div&gt;
            &lt;!-- /.box-header --&gt;
            &lt;div class=&quot;box-body text-center&quot;&gt;
              &lt;p&gt;By adding the class &lt;code&gt;.vertical&lt;/code&gt; we achieve:&lt;/p&gt;

              &lt;div class=&quot;progress vertical&quot;&gt;
                &lt;div class=&quot;progress-bar progress-bar-green&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;40&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;height: 40%&quot;&gt;
                  &lt;span class=&quot;sr-only&quot;&gt;40%&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;progress vertical&quot;&gt;
                &lt;div class=&quot;progress-bar progress-bar-aqua&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;20&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;height: 20%&quot;&gt;
                  &lt;span class=&quot;sr-only&quot;&gt;20%&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;progress vertical&quot;&gt;
                &lt;div class=&quot;progress-bar progress-bar-yellow&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;height: 60%&quot;&gt;
                  &lt;span class=&quot;sr-only&quot;&gt;60%&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;progress vertical&quot;&gt;
                &lt;div class=&quot;progress-bar progress-bar-red&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;80&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;height: 80%&quot;&gt;
                  &lt;span class=&quot;sr-only&quot;&gt;80%&lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- /.box-body --&gt;
          &lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>

        </div>
    </div>
</article>